<template>
  <header class="section-header f jc-sb">
    <div class="left-part">
      <slot name="left-part">
        <span v-mouseover:isLeftPartHover="onMouseover" class="f ai-c">
          <span class="f-sz-24 f-wt-b" :style="{ color: hoverCollect.isLeftPartHover ? '#000' : '#555' }">{{ title }}</span>
          <n-icon :depth="hoverCollect.isLeftPartHover ? 1 : 3" :size="18" :component="ArrowForwardIosSharp" />
        </span>
      </slot>
    </div>
    <div class="right-part">
      <slot name="right-part"></slot>
    </div>
  </header>
</template>

<script setup lang="ts">
  import { ArrowForwardIosSharp } from '@vicons/material';

  defineProps({
    title: {
      type: String,
      default: '',
    },
  });

  const hoverCollect = reactive({
    isLeftPartHover: false,
  });

  const onMouseover = (field, isHover) => {
    hoverCollect[field] = isHover;
  };
</script>

<style lang="scss">
  .section-header {
    margin: 32px 0 10px 0;
    .left-part {
      cursor: pointer;
    }
  }
</style>
